<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取表单</title>
</head>
<body>
    <!--获取表单
        常用两种方式：
        1.document.表单名称
        2.document.getElementById（表单id）
    -->
    <form action="" method="post" id="myform" name="myform">
        姓名：<input type="text" id="uname" name="uname" value="zs"><br/>
        密码：<input type="password" id="upwd" name="upwd" value="123456"><br>
        个人说明：<teatarea  name="intro" >这小伙子不错</teatarea><br>
        <input type="radio" name="rad" id="rad1" value="1">1
        <input type="radio" name="rad" id="rad2" value="2">2
        <br>
        <input type="checkbox" name="rad1" value="1">唱歌
        <input type="checkbox" name="rad1" value="2">跳舞
        <input type="checkbox" name="rad1" value="3">rap
        <br>
        <select name="city" id="city">
            <option value="北京">北京</option>
            <option value="杭州">杭州</option>
            <option value="广州">广州</option>
        </select>
        <br>
        <button type="button" onclick="getTxt();">获取元素内容</button>

    </form>





    <script>
        function getTxt(){
            //通过id取值
            var uname=document.getElementById("uname").value;
            console.log(uname);
            var upwd=document.getElementById("upwd").value;
            console.log(upwd);
            var rad1=document.getElementById("rad1").value;
            console.log(rad1);
            var rad2=document.getElementById("rad2").value;
            console.log(rad2);

            //通过name取值
            var checkbox=document.getElementsByName("rad1");
            var all="";
            //遍历
            for (var i=0;i<checkbox.length;i++){
                //得到每一个单选按钮
                var ra=checkbox[i];
                //得到单选框的状态
                var ck=ra.checked;
                //如果选中，得到值
                if(ck) {
                    var va = ra.value;
                    all += va + ",";
                }
            }
            //字符串截取
            all=all.substring(0,all.length-1);
            console.log(all);


            //获取下拉列表对象
            var sel=document.getElementById("city");
            //得到下拉框被选中项的索引
            var index=sel.selectedIndex;
            var index1=sel.value;
            var selectedValue = sel.options[index].value;
            console.log(index);
            console.log(index1);
            console.log(selectedValue);
        }

    </script>

</body>
</html>